<template>
  <div>
    <div>
      <el-menu :default-active="activeIndex"
               :router="true"
               class="el-menu-demo"
               mode="horizontal">
        <!-- 基座的路由 -->
        <el-menu-item index="/">主应用Home</el-menu-item>
        <el-menu-item index="/about">主应用About</el-menu-item>
        <el-menu-item index="/vue">子应用vue</el-menu-item>
        <!-- <router-link to="/vue/about">vue应用</router-link> -->
      </el-menu>
    </div>
    <router-view />
    <div id="vue"></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      activeIndex: '/'
    }
  },
  watch: {
    $route() {
      // console.log(val);
      // this.activeIndex = val.path
    }
  }
}
</script>

<style lang="scss">
#app {
  // font-family: Avenir, Helvetica, Arial, sans-serif;
  // -webkit-font-smoothing: antialiased;
  // -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  // color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
